<script setup lang="ts">
const handleOpen = () => {};
const handleClose = () => {};
</script>
<template>
  <div class="left-bar">
      <el-menu
        default-active="2"
        class="el-menu-vertical-bar"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>菜单1</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">菜单1-1</el-menu-item>
            <el-menu-item index="1-2">菜单1-2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">菜单1-3</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>菜单1-4</template>
            <el-menu-item index="1-4-1">菜单1-5</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>菜单2</span>
        </el-menu-item>
      </el-menu>
  </div>
</template>

<style lang="scss" scoped>
    .left-bar {
        width: 200px;
        height: 100%;
        background: #fff;
        .el-menu-vertical-bar {
            height: 100%;
        }
    }
</style>
